<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            width: 600px;
            height: 800px;
            border: black solid 2px;
            position: relative;
        }

        .left {
            width: 45%;
            height: 600px;
            float: left;
            border: 1px solid black;
            margin-left: 3px;
            margin-top: 10px;
            background-color: #f6f6f6;
        }

        .right {
            width: 45%;
            height: 600px;
            float: left;
            border: 1px solid black;
            margin-left: 50px;
            margin-top: 10px;
            background-color: #f6f6f6;
        }

        input {
            margin-top: 50px;
            margin-left: 10px;
        }

        .header {
            width: 100%;
            height: 40px;
            text-align: center;
            border: solid 1px black;
            border-top: 30px #8c92a4;
            line-height: 40px;
        }

        .header:hover {
            color: #4baf50;
        }

        ul {
            list-style: none;
        }

        li {
            width: 250px;
            height: 40px;
            margin: 5px auto;
            text-align: center;
            line-height: 40px;
            border: 1px solid pink;
            position: absolute;
        }

        .list2 {
            margin-top: 40px;
        }

        ul>li:hover {
            box-shadow: 5px 5px 2px #888888;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <div class="header">代办的</div>
            <ul class="list1">
                <li>任务一</li>
                <li>任务二</li>
                <li>任务三</li>
            </ul>
        </div>
        <div class="right">
            <div class="header">进行中</div>
            <ul class="list2"></ul>
        </div>
        <input type="text" name="" id="input">
        <button>添加</button>
        <script>
            var left = document.querySelector(".left")
            var right = document.querySelector(".right")
            var btn = document.querySelector("button")
            var input = document.querySelector("input")
            var list1 = document.querySelector(".list1")
            var list2 = document.querySelector(".list2")
            btn.onclick = function () {
                var li = document.createElement("li")
                li.innerHTML = input.value
                list1.appendChild(li)
                leaveout()
            }
            leaveout()
            function leaveout() {
                var li = document.querySelectorAll("li")
                li.forEach(function (item, key) {
                    console.log(item)
                    item.style.left = "10px"
                    item.style.top = `${key * 50 + 50}px`
                    item.onmousedown = function (e) {
                        var e = e || window.event
                        var x = e.clientX - this.offsetLeft
                        var y = e.clientY - this.offsetTop
                        var obj = {}
                        obj.left = item.style.left
                        obj.top = item.style.top
                        document.onmousemove = function (e) {
                            var e = e || window.event
                            var xx = e.clientX
                            var yy = e.clientY
                            item.style.top = yy - y + "px"
                            item.style.left = xx - x + "px"
                            var AminX = item.offsetLeft;
                            var AmaxX = item.offsetLeft + item.offsetWidth;
                            var AminY = item.offsetTop;
                            var AmaxY = item.offsetTop + item.offsetHeight;
                            var BminX = list2.offsetLeft;
                            var BmaxX = list2.offsetLeft + list2.offsetWidth;
                            var BminY = list2.offsetTop;
                            var BmaxY = list2.offsetTop + list2.offsetHeight;


                            if (AmaxX > BminX && AminX < BmaxX && AmaxY > BminY && AminY < BmaxY) {
                                console.log("yy")
                                obj.left += BminX
                                obj.top += BminY
                            }
                        }
                        document.onmouseup = function () {
                            document.onmousemove = ""
                            item.style.left = obj.left
                            item.style.top = obj.top
                        }
                    }
                })
            }
        </script>
    </div>
</body>

</html>